<template>
  <div class="product-details">
    <el-card style="width: 85%">
      <div class="product-content">
        <div class="product-image-container">
          <img :src="product.productImageUrl" class="product-image" alt="商品图片">
        </div>
        <div class="product-info">
          <h2>{{ product.productName }}</h2>
          <p>{{ product.productDescription }}</p>
          <p class="product-price">价格: {{ product.productPrice }}</p>
          <p>库存: {{ product.productStock }}</p>
          <p>所属分类: {{ product.categoryName }}</p>
          <p>卖家ID: {{ product.sellerId }}</p>

          <el-input-number v-model="num" :min="1" :max="10" label="数量" @change="handleChange" />

          <!-- 使用新的 div 插入空白间隔 -->
          <div style="height: 10px;" />

          <!-- 使用新的 div 包裹按钮，并设置 clear 样式 -->
          <div style="clear: both;">
            <el-button type="primary" @click="addToCart">加入购物车</el-button>
            &nbsp;
            <router-link :to="'/mall/checkout?id=' + product.productId" class="card-link">
              <el-button type="primary" @click="addToCart">现在购买</el-button>
            </router-link>
          </div>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>

export default {
  data() {
    return {
      num: 1,
      product: [
        {
          'productId': 2,
          'productName': '蜂花一号',
          'productDescription': '运动鞋',
          'productPrice': 1000.00,
          'productImageUrl': 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/iphone-13-pro-family-hero.png',
          'productStock': 1002,
          'creationDate': '2023-09-20T09:02:18.000+00:00',
          'updateDate': '2023-09-23T08:18:30.000+00:00',
          'categoryId': 1,
          'sellerId': 1
        }]
    }
  },
  created() {
    this.getProductById()
  },
  methods: {
    // 查询分页数据
    getProductById() {
      this.$store
        .dispatch('product/getById', {
          productId: this.$route.query.id
        })
        .then((res) => {
          if (res.code === 0) {
            const { data } = res
            this.product = data
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    // 添加商品到购物车
    addToCart() {
      this.$store
        .dispatch('product/addCart', {
          productId: this.$route.query.id,
          quantity: this.num
        })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    handleChange(value) {
      console.log(value)
    }
  }

}
</script>

<style scoped>
.product-content {
  display: flex;
}

.product-image-container {
  flex: 1;
}

.product-image {
  width: 85%;
  height: auto;
}

.product-info {
  flex: 1;
  margin-left: 20px;
  font-size: 20px; /* 调整文字大小 */
}

.product-details {
  display: flex;
  justify-content: center;
}
</style>
